<!DOCTYPE html>
<html lang="ug" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>كىرىش بېتى</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1D4ED8',
secondary: '#3B82F6'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
.glass-morphism {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-white">
<div class="flex flex-col md:flex-row min-h-screen">
<div class="w-full md:w-1/2 p-6 md:p-20 flex flex-col items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-white/50 backdrop-blur-sm"></div>
<div class="w-full max-w-[400px] relative z-10">
<div class="text-center mb-8 md:mb-12">
<div class="mb-4">
<h1 class="font-['Pacifico'] text-4xl md:text-5xl text-primary mb-2 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">logo</h1>
<p class="text-gray-600 text-lg">سىستېمىغا خۇش كەلدىڭىز</p>
</div>
</div>
<div class="space-y-5 md:space-y-6">
<div>
<div class="relative group">
<i class="fas fa-user absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 group-hover:text-primary transition-colors"></i>
<input type="text" placeholder="ئىشلەتكۈچى نامى" class="w-full px-12 py-4 bg-white/80 backdrop-blur-sm border-2 border-gray-100 rounded-xl focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 text-right shadow-sm transition-all" />
</div>
</div>
<div>
<div class="relative group">
<i class="fas fa-lock absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 group-hover:text-primary transition-colors"></i>
<input type="password" placeholder="پارول" class="w-full px-12 py-4 bg-white/80 backdrop-blur-sm border-2 border-gray-100 rounded-xl focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 text-right shadow-sm transition-all" />
</div>
</div>
<div class="flex items-center justify-end">
<label class="flex items-center gap-3 cursor-pointer group">
<input type="checkbox" class="w-4 h-4 rounded-md border-2 border-gray-200 text-primary focus:ring-primary/20 transition-all">
<span class="text-sm text-gray-600 group-hover:text-primary transition-colors">مېنى ئەستە تۇت</span>
</label>
</div>
<button class="w-full py-4 bg-gradient-to-r from-primary to-secondary text-white rounded-xl hover:shadow-lg hover:shadow-primary/20 active:scale-[0.98] transition-all duration-200 font-medium">
كىرىش
</button>
<div class="text-center">
<p class="text-sm text-gray-600">
پارولنى ئۇنتۇپ قاپسىزمۇ؟
<a href="#" class="text-primary hover:text-secondary font-medium transition-colors">پارولنى تاپاي</a>
</p>
</div>
<div class="flex items-center justify-center gap-6 mt-8">
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
<i class="fab fa-weixin text-2xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
<i class="fas fa-envelope text-2xl"></i>
</a>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 bg-gradient-to-br from-primary to-blue-900 p-6 md:p-20 flex items-center justify-center text-white relative overflow-hidden">
<div class="absolute inset-0 bg-[url('')] opacity-10"></div>
<div class="glass-morphism rounded-2xl p-8 md:p-12 max-w-lg text-center relative z-10">
<div class="mb-8">
<img src="https://ai-public.mastergo.com/ai/img_res/24e87261f299bcc84210e8b73c225c07.jpg"
alt="Business Assistant"
class="w-full h-auto rounded-xl shadow-2xl mx-auto transform hover:scale-[1.02] transition-transform duration-300" />
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4 md:mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-200">تىجارەت ياردەمچىسى</h2>
<p class="text-lg md:text-xl text-blue-100">سىزنىڭ مۇۋەپپەقىيەتلىك تىجارىتىڭىزنىڭ ئىشەنچىلىك ھەمراھى</p>
</div>
</div>
</div>
</body>
</html>
